<template>
	<div>
		<!-- 引入公共头部组件 -->
		<HeaderTitle title="我的工单" rightTextColor="#1959F9" :rightContent="'新建'" @selectRightIconChange="onClickRight"
			:inputValue="queryParams[0].keyword" placeholder="请输入标题信息" :isBack="true" :isSearch="true" :isTab="true"
			:currentIndex="currentIndex" :tabsList="tabsList" @confirm="search" @cancel="cancel"
			@tabOnClickItem="onClickItem" />
		<div style="width: 100%;">
			<!-- 内容区域 -->
			<!-- 我的发起-->
			<div v-if="currentIndex == 0" class="outerBox" style="padding-top: 110px;">
				<div>
					<div class="boxFormal" v-for="item in cardData" :key="item.Id" @click="sapleEdit(item)">
						<div class="cardName" style="font-size:14px">
							<div style="display:flex; justify-content: space-between;padding-right:20px">
								<p>标题：{{ item.SWOTitle }}</p>
								<uni-tag v-if="item.State == 0" type="primary" style="padding:5px 15px"
									:text="'发起'"></uni-tag>
								<uni-tag v-if="item.State == 1" type="success" style="padding:5px 15px"
									:text="'启动'"></uni-tag>
								<uni-tag v-if="item.State == 2" type="warning" style="padding:5px 15px"
									:text="'执行'"></uni-tag>
								<uni-tag v-if="item.State == 3" color="#7232dd" style="padding:5px 15px"
									:text="'超时'"></uni-tag>
								<uni-tag v-if="item.State == 4" type="danger" style="padding:5px 15px"
									:text="'关闭'"></uni-tag>
							</div>
							<p>客户：{{ item.CustomerName }}</p>
						</div>
						<div class="code" style="font-size:14px">
							<u-row :gutter="10">
								<u-col :span="12">
									完成日期:{{ item.EndTimeRqstd ? item.EndTimeRqstd.substring(0, 10) : "未完成" }}
								</u-col>
								<u-col :span="12">
									工单类型: <uni-tag v-if="item.SWOType === '投诉处理'" style="margin-left: 10rpx;"
										size="small" :inverted="true" :text="'投诉处理'"></uni-tag>
									<uni-tag v-if="item.SWOType === '客户跟进'" type="success" style="margin-left: 10rpx;"
										size="small" :inverted="true" :text="'客户跟进'"></uni-tag>
									<uni-tag v-if="item.SWOType === '样品服务'" type="warning" style="margin-left: 10rpx;"
										size="small" :inverted="true" :text="'样品服务'"></uni-tag>
									<uni-tag v-if="item.SWOType === '技术服务'" type="primary" color="#7232dd"
										style="margin-left: 10rpx;" size="small" :inverted="true"
										:text="'技术服务'"></uni-tag>
								</u-col>
							</u-row>
						</div>
						<div style="text-align: right;margin-right: 5%">
							<u-button v-if="item.State<2" size="mini" @click.stop="GLcardDataChangeClick(0, item)"
								style="height: 60rpx;" type="primary">编辑
							</u-button>
							<u-button v-if="item.State<2" size="mini" @click.stop="GLcardDataChangeClick(1, item)"
								style="height: 60rpx;margin-left: 25rpx;" type="error">删除
							</u-button>
						</div>
					</div>
				</div>
			</div>
			<!-- 我的待办 -->
			<div v-else class="outerBox" style="padding-top: 110px;margin-left: 20rpx;margin-right: 20rpx;">
				<div>
					<div class="boxFormal" v-for="item in MycardData" :key="item.Id" @click="mywork(item)"
						style="padding-left: 20rpx;padding-right: 20rpx;">
						<div class="cardName" style="font-size:14px">
							<p>标题：{{ item.SWOTitle }}</p>
							<p>客户：{{ item.CustomerName }}</p>
						</div>
						<div class="code" style="font-size:14px;display: flex;justify-content: space-between;">
							<span>完成日期:{{ item.EndTimeRqstd ? item.EndTimeRqstd.substring(0, 10) : "未完成" }}</span>
							<span>工单类型:{{ item.SWOType }}</span>
						</div>
					</div>
				</div>
			</div>

			<div style="padding-bottom: 20px;">
				<LoadingMore :status="status" :contentText="contentText" :rows="data"></LoadingMore>
			</div>
		</div>


		<!-- <PaginationCom :pagination="pagination" :Total="Total" :thisOjb="this" /> -->
		<!-- <Edit :readonly="readonly" :parentObj="this" ref="edit" /> -->
		<!-- <myWork :readonly="readonly" :parentObj="this" ref="myWork" /> -->
		<!-- <work :readonly="readonly" :parentObj="this" ref="work" /> -->
		<!-- 暂时不要删除后续打开 反馈组件 -->
		<!-- <feedback :parentObj="this" ref="feedback" /> -->
		<!-- <feedbackDetail ref="feedbackDetail" /> -->
	</div>
</template>

<script>
	import {
		ServiceWorkOrderMainGetDataListByMySelfCustomer,
		GetDataListByMoreCondition,
		ServiceWorkOrderMainGetDataListByMyToDo,
		ServiceWorkOrderMainDeleteData,
	} from '@/api/interface.js'
	// 引入顶部navbar组件
	import HeaderTitle from '@/components/header/header-title.vue'
	// import PaginationCom from "../../components/PaginationCom.vue";
	// 引入公共头部组件
	// import HeaderMenu from "../../components/VolHeaderMenu.vue";
	// import Edit from "./Edit.vue";
	// import work from "./work.vue";
	// import feedback from "./feedback.vue";
	// import myWork from "./myWork.vue";

	export default {
		components: {
			HeaderTitle
			// Edit,
			// feedback,
			// 样品反馈详情
			// feedbackDetail,
			// HeaderMenu
			// work
		},

		data() {
			return {
				styleType: 'text',
				// 标签栏点击的是我的样品还是反馈
				currentIndex: 0,
				tabsList: ['我的发起', '我的待办'],
				// 加载状态
				status: "loading",
				contentText: {
					contentdown: '轻轻上拉',
					contentrefresh: '努力加载中...',
					contentnomore: '实在没有了'
				},

				key: 0,
				image: require("../../assets/search.png"),
				// 是否显示检索提示
				isSearchMyworkOrder: false,
				// 是否在初始化时立即执行滚动位置检查
				immediateCheck: true,
				active: 0,
				readonly: false,
				loading: false,
				finished: false,
				PageRows: 10,
				pagination: {
					// 当前页数
					current: 1,
					// 每页条数
					pageSize: 10,
					// 总条数
					Total: 0,
					showTotal: 0
				},
				// 我的工单我的发起列表数据
				cardData: [],
				SWOloading: false,
				SWOfinished: false,
				MyWorkOrderRows: 10,
				SWOTitle: "",
				Total: 0,
				Keyword: "",
				data: [],
				MycardData: [],
				Myloading: false,
				Myfinished: false,
				MyToDoRows: 10,
				userId: "",
				GLtitle: "",
				GLloading: false,
				GLfinished: false,
				GLPageRows: 10,
				GLcardData: [],
				queryParams: [{
					Condition: "SWOTitle",
					keyword: ""
				}]
			};
		},
		onShow() {
			// 是否显示检索提示
			this.isSearchMyworkOrder = true;
			//  去除加载状态
			this.loading = false;
			// 获取我的工单-我的发起
			if (this.currentIndex == 0) {
				this.cardData = []
				// 获取我的工单-我的发起
				this.getMyWorkOrderList()
			} else {
				this.MycardData = []
				// 获取我的工单-我的待办
				this.getMyToDoList()
			}
		},

		//下拉刷新
		onPullDownRefresh() {
			this.pagination.current = 1
			uni.stopPullDownRefresh();
			if (this.currentIndex == 0) {
				this.cardData = []
				// 获取我的工单-我的发起
				this.getMyWorkOrderList()
			} else {
				this.MycardData = []
				// 获取我的工单-我的待办
				this.getMyToDoList()
			}

		},
		//上拉加载
		onReachBottom() {
			if (this.status == 'noMore') {
				return;
			}
			this.pagination.current++;
			if (this.currentIndex == 0) {
				// 获取我的工单-我的发起
				this.getMyWorkOrderList()
			} else {
				// 获取我的工单-我的待办
				this.getMyToDoList()
			}
		},

		methods: {
			// 搜索取消 
			cancel() {
				this.queryParams[0].keyword = ""
				this.search()
			},
			//搜索按钮
			search(value) {
				console.log('搜索关键词过来---', value)
				this.queryParams[0].keyword = value
				// 页数重置
				this.pagination.current = 1;
				if (this.currentIndex == 0) {
					// 我的发起列表数据
					// 重新加载
					this.cardData = []
					this.getMyWorkOrderList();
				} else {
					// 重新加载
					this.MycardData = []
					// 我的代办列表数据
					this.getMyToDoList();
				}
			},
			// 我的工单列表编辑删除
			GLcardDataChangeClick(type, item) {
				if (type == 0) {
					// 点击的是编辑
					uni.navigateTo({
						url: "/pages/service/work?Id=" + item.Id + '&title=编辑'
					})
				} else {
					// 点击的是删除
					this.$utils.showConfirm({
						content: '确定要删除吗',
						confirmText: "删除",
						confirmColor: "#D1100B"
					}).then(res => {
						if (res.confirm) {
							ServiceWorkOrderMainDeleteData([item.Id])
								.then(resJson => {
									if (resJson.Success) {
										this.$sucessToast("已删除");
										// 页数初始化
										this.pagination.current = 1;
										// 刷新工单发起列表
										this.getMyWorkOrderList();
										this.loading = false;
									} else {
										this.$errorToast(resJson.Msg);
										this.loading = false;
									}
								});
						} else {
							this.loading = false;
						}
					})
				}
			},
			// 跳转工单回复页页面
			mywork(item) {
				uni.navigateTo({
					url: "/pages/myWorkOrder/myWork?Id=" + item.Id + '&title=待办'
				})
			},
			// 获取我的工单-我的发起
			getMyWorkOrderList() {
				this.status = "loading"
				uni.showLoading({
					title: '加载中'
				})
				GetDataListByMoreCondition({
						PageIndex: this.pagination.current,
						PageRows: this.pagination.pageSize,
						// SortField: "CreateTime",
						SortField: "StartTime",
						SortType: "desc",
						Search: this.queryParams
						// Search: [
						// 	{
						// 		Condition: 'CreatorId',
						// 		Keyword: this.$store.state.system.userId
						// 	},
						// 	{
						// 		...this.queryParams
						// 	}
						// ]
					})
					.then(resJson => {
						if (resJson.Success) {
							uni.hideLoading()
							// 赋值总条数
							this.pagination.Total = resJson.Total;
							this.Total = resJson.Total;
							if (resJson.Data == null) {
								this.status = 'noMore'; // 没有更多数据
								return
							}
							if (this.pagination.current == 1) {
								this.cardData = resJson.Data;
							} else {
								this.cardData = this.cardData.concat(resJson.Data);
							}
							if (this.cardData.length >= resJson.Total) {
								this.status = 'noMore'; // 没有更多数据
							} else {
								this.status = 'loading'; // 没有更多数据
							}
						} else {
							this.status = 'noMore'; // 没有更多数据
						}
					});
			},
			// 获取我的工单-我的待办
			getMyToDoList() {
				this.status = "loading"
				uni.showLoading({
					title: '加载中'
				})
				ServiceWorkOrderMainGetDataListByMyToDo({
						PageIndex: this.pagination.current,
						PageRows: this.pagination.pageSize,
						SortField: "CreateTime",
						SortType: "desc",
						Search: this.queryParams
					})
					.then(resJson => {
						if (resJson.Success) {
							uni.hideLoading()
							// 赋值总条数
							this.pagination.Total = resJson.Total;
							this.Total = resJson.Total;
							if (resJson.Data == null) {
								this.status = 'noMore'; // 没有更多数据
								return
							}
							if (this.pagination.current == 1) {
								this.MycardData = resJson.Data;
							} else {
								this.MycardData = this.MycardData.concat(resJson.Data);
							}
							if (this.MycardData.length >= resJson.Total) {
								this.status = 'noMore'; // 没有更多数据
							} else {
								this.status = 'loading'; // 没有更多数据
							}
						} else {
							this.status = 'noMore'; // 没有更多数据
						}
					});
			},

			// 我的工单查看详情
			sapleEdit(item) {
				uni.navigateTo({
					url: "/pages/service/work?title=查看&Id=" + item.Id
				})
			},
			// 我的发起导航栏点击事件
			onClickItem(e) {
				console.log('点击的是', e)
				this.currentIndex = e
				if (this.currentIndex == 0) {
					// 我的发起列表数据
					// 重新加载
					this.cardData = []
					this.status = "loading"
					this.getMyWorkOrderList();
				} else {
					// 重新加载
					this.MycardData = []
					this.status = "loading"
					// 我的代办列表数据
					this.getMyToDoList();
				}
			},
			// 我的工单新建
			onClickRight() {
				uni.navigateTo({
					url: "/pages/service/work?title=新建"
				})
			},
		},
	};
</script>

<style scoped>
	/* 覆盖van-button的默认样式 */
	.van-button {
		padding: 0 10px 0 10px !important;
	}

	.DeliverAddress {
		margin-left: 10px;
		word-break: break-all;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		/* 超出几行显示 */
		-webkit-line-clamp: 1;
	}

	.state {
		display: flex;
		justify-content: space-between;
	}

	.pagination {
		position: absolute;
		bottom: 5px;
		right: 20%;
	}

	.delete {
		padding-top: 10px;
		background-color: #fff;
		padding-right: 20px;
		height: 60px;
		font-size: 60px;
		color: red;
	}

	.outerBox {}

	.btn {
		position: absolute;
		bottom: 0;
		right: 0;
	}

	.sampleName {
		font-weight: 600;
		line-height: 1.8;
		width: 240px;
		color: #000;
		font-size: 14px;
		margin-left: 10px;
		margin-top: 5px;
	}

	.MySamplebox {
		box-shadow: 2px 2px 5px #ccc;
		border-radius: 5px;
		position: relative;
		width: 95%;
		margin: 3px auto;
		padding-bottom: 10px;
		margin-bottom: 10px;
	}

	img {
		width: 100px;
		height: 100px;
	}

	.fixedbox {
		position: fixed;
		bottom: 0;
		right: 0;
		/* height: 50px; */
		background: #fff;
		width: 100vw;
	}

	.pagination {
		position: absolute;
		bottom: 5px;
		right: 20%;
	}

	.code {
		display: flex;
		color: #777;
	}

	.Foricon {
		color: blue;
		position: absolute;
		right: 8px;
	}

	.btn {
		position: absolute;
		bottom: 0;
		right: 0;
	}

	.formalBox {
		height: calc(100vh - 150px);
		padding-bottom: 50px;
		box-sizing: border-box;
		overflow: auto;
	}

	.cardName {
		padding-top: 10px;
		/* margin-left: 10px; */
		margin-bottom: 5px;
		color: #000000;
		font-weight: 600;
		font-size: 18px;
		line-height: 1.8;
	}

	.companyAddress {
		padding-top: 10px;
		margin-left: 10px;

		color: #777;
		/* font-weight: 600;
  font-size: 18px; */
		line-height: 1.3;
	}

	.boxFormal {
		background-color: #fff;
		box-shadow: 2px 2px 5px #ccc;
		border-radius: 5px;
		position: relative;
		padding-left: 15rpx;
		width: 95%;
		/* height: 80px; */
		padding-bottom: 10px;
		margin: 3px auto;
		margin-bottom: 10px;
	}

	/* .Father {
  display: flex;
} */
</style>